<template>
    <div class="financial-dashboard">
        <!-- 日常支出详情 -->
        <div class="expense-details">
            <h2>日常支出详情</h2>
            <table>
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>类别</th>
                        <th>金额 (元)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in expenses" :key="index">
                        <td>{{ item.date }}</td>
                        <td>{{ item.category }}</td>
                        <td>{{ item.amount.toFixed(2) }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 折线图 -->
        <div class="line-chart">
            <h2>支出趋势</h2>
            <div ref="chart" class="chart"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// 模拟财务数据
const expenses = ref([
    { date: '2023-10-01', category: '餐饮', amount: 50.25 },
    { date: '2023-10-02', category: '交通', amount: 12.5 },
    { date: '2023-10-03', category: '购物', amount: 200.0 },
    { date: '2023-10-04', category: '娱乐', amount: 80.75 },
    { date: '2023-10-05', category: '餐饮', amount: 45.0 },
]);

// 初始化折线图
const chart = ref(null);
onMounted(() => {
    if (chart.value) {
        const myChart = echarts.init(chart.value);

        // 提取图表所需的数据
        const dates = expenses.value.map((item) => item.date);
        const amounts = expenses.value.map((item) => item.amount);

        // 配置折线图
        const option = {
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category',
                data: dates,
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    data: amounts,
                    type: 'line',
                    smooth: true,
                    label: {
                        show: true,
                        position: 'top',
                    },
                },
            ],
        };

        // 设置图表配置
        myChart.setOption(option);
    }
});
</script>

<style scoped>
.financial-dashboard {
    padding: 20px;
}

.expense-details {
    margin-bottom: 40px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th,
table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

table th {
    background-color: #f4f4f4;
}

.line-chart {
    width: 100%;
    height: 400px;
}

.chart {
    width: 100%;
    height: 100%;
}
</style>